<template>
  <view class="layout">
    <view class="center">
      <view class="header">
        <view class="center big_title">已入驻商家</view>
      </view>
    </view>
    <view class="center" style="">
      <view
        class=""
        style="
          width: 120rpx;
          height: 0rpx;
          border-bottom: 8rpx solid rgba(110, 88, 170, 1);
        "
      >
      </view>
    </view>
    <view class="big_module">
      <view
        class="center"
        style="background: rgba(110, 88, 170, 0.15); height: 80rpx"
      >
        <view class="" style="display: flex; justify-content: space-between">
          <view
            :class="button_index == 0 ? 'check_button' : 'common_button'"
            style=""
          >
            <view class="check_locaion juzhong">
              <picker mode="region" :range="years" @change="yearChange">
                <view>{{ timetext }} </view>
              </picker>
            </view>
          </view>
          <view
            @click="getBusinessList"
            :class="button_index == 1 ? 'check_button' : 'common_button'"
            >查看全部</view
          >
        </view>
      </view>

      <view class="list" style="height: 800rpx; overflow-y: auto">
        <view
          v-for="(item, index) in businessData"
          :key="index"
          style="margin-top: 20rpx"
        >
          <view class="center" style="">
            <view
              class="image"
              style="margin-right: 20rpx; border-radius: 20rpx"
            >
              <image class="grid-image" :src="item.logo" mode="aspectFill">
              </image>
            </view>

            <view class="" style="width: 390rpx; margin-right: 20rpx">
              <view class="bussiness_name" style="text-align: left">{{
                item.name
              }}</view>
              <view class="location" style="text-align: left">{{
                item.address
              }}</view>
            </view>
            <view class="distinct" style="margin-right: 10rpx">{{
              item.county
            }}</view>
          </view>
        </view>
      </view>
      <view
        class="center"
        style="
          border-radius: 5px;
          font-size: 20rpx;
          background: rgba(255, 255, 255, 1);
          color: rgba(124, 124, 126, 1);
        "
      >
        滑动查看更多...
      </view>
    </view>

    <view class="center" style="">
      <view class="center ruzhu_button" @click="goManagement_Enter">
        我要入驻
      </view>
    </view>
  </view>
</template>

<script>
import request from "../../apis/business.js";

export default {
  data() {
    return {
      timetext: "区域筛选",
      businessData: [],
      province: "",
      city: "",
      button_index: 1,
    };
  },
  onLoad() {
    this.getBusinessList();
  },
  methods: {
    async getBusinessList() {
      try {
        this.button_index = 1;
        this.timetext = "区域筛选";
        const response = await request.businessList();
        this.businessData = response.list;
      } catch (error) {
        console.error("全部列表请求失败:", error);
        uni.showToast({
          title: "请求失败",
          icon: "none",
        });
      }
    },
    yearChange: function (e) {
      // e.detail.value 是一个数组，包含省、市、区
      console.log(e.detail.value);

      // 获取省和市，忽略区
      this.province = e.detail.value[0]; // 省
      this.city = e.detail.value[1]; // 市

      // 更新 timetext，仅显示省和市
      this.timetext = `${this.province} - ${this.city}`;
      this.button_index = 0;
      this.request_region();
    },

    async request_region() {
      try {
        const response = await request.regionList({
          province: this.province,
          city: this.city,
        });
        this.businessData = response.businesses;
        if (this.businessData.length == 0) {
          uni.showToast({
            title: "无数据",
            icon: "none",
          });
        }
      } catch (error) {
        console.error("地区列表请求失败:", error);
        uni.showToast({
          title: "请求失败",
          icon: "none",
        });
      }
    },
    goManagement_Enter() {
      uni.navigateTo({
        url: "/pagesMine/invitation/invitation",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.big_module {
  margin: 30rpx auto;
  border-radius: 5px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 4px 2px rgba(110, 88, 170, 0.2);
}
.juzhong {
  justify-content: center;
  text-align: center;
  align-items: center;
}
.grid-image {
  width: 100%; /* 两张图片并排占满一行 */
  height: 100%; /* 保持图片为正方形，使用相对宽度设置 */
  object-fit: cover; /* 确保图片适配 */
  margin: 0; /* 移除间距 */
  padding: 0; /* 确保没有内边距 */
}
.ruzhu_button {
  width: 290rpx;
  height: 82rpx;
  opacity: 1;
  border-radius: 8rpx;
  background: rgba(110, 88, 170, 1);
  /** 文本1 */
  font-size: 40rpx;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 52rpx;
  color: rgba(255, 255, 255, 1);
}
.list {
  background: rgba(255, 255, 255, 1);
}
.bussiness_name {
  /** 文本1 */
  font-size: 36rpx;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 52rpx;
  color: rgba(110, 88, 170, 100);
  font-family: "思源优设标题黑";
}
.big_title {
  font-size: 72rpx;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 94rpx;
  width: 350rpx;
  // border-bottom: 8rpx solid rgba(121, 72, 234, 1);
  margin-top: 10rpx;

  color: rgba(110, 88, 170, 1);
}
.location {
  /** 文本1 */
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 14.48px;
  color: rgba(0, 0, 0, 0.56);
  font-family: "思源优设标题黑";
}
.distinct {
  /** 文本1 */
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 17.38px;
  color: rgba(121, 72, 234, 0.8);
  font-family: "优设标题黑";
}
.image {
  height: 110rpx;
  width: 110rpx;
}
.check_button {
  /** 文本1 */
  width: 300rpx;
  font-size: 35rpx;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 23.17px;
  color: #6e58aa;
}
.common_button {
  /** 文本1 */
  width: 300rpx;
  font-size: 35rpx;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 23.17px;
  color: rgba(110, 88, 170, 0.3);
}
.button {
  height: 60rpx;
  width: 160rpx;
  opacity: 1;
  border-radius: 8px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(121, 72, 234, 1);
  white-space: nowrap;
}
.subtitle {
  /** 文本1 */
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 17.38px;
  color: rgba(121, 72, 234, 1);
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.layout {
  height: 100%;
  background: rgba(155, 115, 250, 0.05);
  padding-left: 60rpx;
  padding-right: 60rpx;
  font-family: "优设标题黑";
}
.header {
  /** 文本1 */
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0px;
  line-height: 26.06px;
  color: rgba(121, 72, 234, 1);
  width: 350rpx;
  // border-bottom: 8rpx solid rgba(121, 72, 234, 1);
  margin-top: 10rpx;
  // margin-bottom: 10rpx;
}
</style>
